<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
    <mt-tabbar v-model="selected" style="position: fixed">
      <mt-tab-item id="1">
        <img slot="icon" src="@/assets/img/home.svg" v-show="selected!=1" />
        <img slot="icon" src="@/assets/img/home2.svg" v-show="selected==1" />
        <span v-show="selected!=1">主页</span>
        <span v-show="selected==1" class="selecteds">主页</span>
      </mt-tab-item>
      <mt-tab-item id="3">
        <img slot="icon" src="@/assets/img/label.svg" v-show="selected!=3" />
        <img slot="icon" src="@/assets/img/label2.svg" v-show="selected==3" />
        <span v-show="selected!=3">标签</span>
        <span v-show="selected==3" class="selecteds">标签</span>
      </mt-tab-item>
      <mt-tab-item id="2">
        <img slot="icon" src="@/assets/img/record.svg" v-show="selected!=2" />
        <img slot="icon" src="@/assets/img/record2.svg" v-show="selected==2" />
        <span v-show="selected!=2">账本</span>
        <span v-show="selected==2" class="selecteds">账本</span>
      </mt-tab-item>
      <mt-tab-item id="4">
        <img slot="icon" src="@/assets/img/statistics.svg" v-show="selected!=4" />
        <img slot="icon" src="@/assets/img/statistics2.svg" v-show="selected==4" />

        <span v-show="selected!=4">统计</span>
        <span v-show="selected==4" class="selecteds">统计</span>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
// import Tabber from '@/components/context/Tabber'
export default {
  name: "app",
  // components:Tabber
  data() {
    return {
      selected: 1,
      incLs: [
        {
          label: "工资",
          value: "salary",
        },
        {
          label: "奖金",
          value: "bonus",
        },
        {
          label: "兼职",
          value: "part_time",
        },
        {
          label: "副业",
          value: "avocation",
        },
      ],
      extendL: [
        {
          label: "零食",
          value: "snacks",
        },
        {
          label: "餐饮",
          value: "catering",
        },
        {
          label: "出行",
          value: "travel",
        },
        {
          label: "购物",
          value: "shopping",
        },
        {
          label: "日常",
          value: "everyday",
        },
        {
          label: "房租",
          value: "rent",
        },
        {
          label: "医疗",
          value: "medical",
        },],
    };
  },
  mounted() {
    //添加已有的标签
    let exL = JSON.parse(window.localStorage.getItem("expendL"));
    if (exL) {
      exL.forEach((item) => {
        this.$store.commit("addExpendList", item);
      });
    }else{
       window.localStorage.setItem("expendL", JSON.stringify(this.extendL));
      this.extendL.forEach((item) => {
        this.$store.commit("addExpendList", item);
      });
    }

    let incL = JSON.parse(window.localStorage.getItem("incomeL"));
    if (incL) {
      incL.forEach((item) => {
        this.$store.commit("addIncomeList", item);
      });
    } else {
      //初次进入
      window.localStorage.setItem("incomeL", JSON.stringify(this.incLs));
      this.incLs.forEach((item) => {
        this.$store.commit("addIncomeList", item);
      });
    }
    if (this.$route.path.indexOf("home/expend") == -1)
      this.$router.replace("/home");
  },
  watch: {
    selected() {
      // console.log(this.selected);
    },
  },
  created() {},
  watch: {
    selected(val) {
      val = parseInt(val);
      switch (val) {
        case 1:
          this.$router.replace("/home");
          break;
        case 2:
          this.$router.replace("/accountbook");
          break;
        case 3:
          this.$router.replace("/label");
          break;
        case 4:
          this.$router.replace("/statistics");
          break;
      }
    },
  },
};
</script>
<style>
.selecteds {
  color: red;
}
html{
  font-size: 4.267vw;
}

</style>
